<template>
  <div>
    <div class="mui-card" v-for="item in orderList" :key="item.id">
      <div class="title">
        <span>{{item.create_time}}</span>
        <div>
          <span>未支付</span> | 
          <span @click="cancel(item.id)" v-show="item.is_cancel===0">取消订单</span>
          <span v-show="item.is_cancel===1">已取消</span>
        </div>
      </div>
      <div class="content" @click="show(item.id)">
        <div class="img-box">
          <div class="img-con" v-for="item2 in item.user_order_goods" :key="item2.id">
            <img :src="item2.goods_goods.image" alt="">
            <div class="num">x{{item2.count}}</div>
          </div>
        </div>
        <div class="price">
          实付金额：<span>￥{{item.price}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
    orderList: [],  // orderList里的有 商品列表 user_order_goods，商品列表里有 图片列表 goods_goods

    }
  },
  created() {
    this.getOrderList()
  },
  methods: {
    // 获取订单列表
    getOrderList() {
      this.$http.get('order/list').then(res => {
        if (res.data.code === 1) {
          this.orderList = res.data.data
          console.log(this.orderList);
        } else if (res.data.code === 2) {
          this.$toast('您未登录，请先登录')
          this.$router.push('/user/login')
        } else {
          this.$toast('订单列表获取失败')
        }
      })
    },
    // 取消订单
    cancel(id) {
      this.$http.post('order/cancel',{id}).then(res => {
        if (res.data.code === 1) {
          this.$toast('订单' + res.data.msg)
          // 取消成功，再次渲染页面
          this.getOrderList()
        } else if (res.data.code === 2) {
          this.$toast('您未登录，请先登录')
          this.$router.push('/user/login')
        } else {
          this.$toast('订单取消失败')
        }
      })
    },
    // 显示订单详情
    show(id) {
      // 跳到订单详情页面 查看订单
      this.$router.push('/order/show/'+id)
    }
  }
}
</script>

<style lang="scss" scoped>
.mui-card {
  .title {
    display: flex;
    justify-content: space-between;
    color: #999;
    border-bottom: 1px solid #ccc;
    padding: 10px;
  }
  .content {
    padding: 10px;
    overflow: hidden;
    .img-box {
      width: 100%;
      overflow: hidden;
      .img-con {
        position: relative;
        float: left;
        width: 70px;
        margin: 5px;
        img {
          width: 100%;
        }
      }
      .num {
        position: absolute;
        right: 0;
        bottom: 7%;
        width: 20px;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        text-align: center;
        background-color: rgba(0,0,0,.4);
        color: #fff;
      }
    }
    .price {
      text-align: right;
      color: #999;
      span {
        color: #000;
      }
    }
  }
}
</style>